import callFeedback from "./modalFeedback"
import { AutoCenter, Space, Button } from 'antd-mobile'
import { checkENV2 } from '@/utils'
import { API, BASE_PATH } from '@/config'
import requewt from "@/utils/requewt"
import Router from "next/router"
export const useCommonHandler = () => {
  /** 未在社群提示 */
  const handleShowShare = (qrcodeSrc) => {
    callFeedback({
      bodyClassName: 'act-feedback-modal share-modal  close-at-center-bottom',
      content: <div className="share-content">
        <img
          width={91}
          style={{ position: 'absolute', top: '-34px' }}
          src={`${BASE_PATH}/img/game/share-top-icon.png`}
        />
        <AutoCenter>
          <Space direction="vertical" align="center">
            <h3>您好</h3>
            <Space direction="vertical" align="center">
              <div>本次活动仅限活动群参与</div>
            </Space>
          </Space>
        </AutoCenter>
        <AutoCenter>
          <img
            src={qrcodeSrc}
            width='180'
            height='180'
            style={{ marginTop: '20px' }}
          />
        </AutoCenter>
        <AutoCenter>
          <h3 style={{ textAlign: 'center' }}>识别二维码可入群</h3>
          <h3 style={{ textAlign: 'center' }}>与小伙伴们一起赢取海量U币</h3>
        </AutoCenter>
        <img
          width={55}
          style={{ position: 'absolute', right: '12%', bottom: '10px' }}
          src={`${BASE_PATH}/img/game/share-bottom-icon.png`}
        />
      </div>,
      actions: [],
      closeOnAction: false,
      closeOnMaskClick: false,
      hideClose: true
    })
  }
  /** 分享邀请 */
  const handleShare = (qrcodeSrc) => {
    requewt(API.user.qrcode).then((resp) => {
      callFeedback({
        onClose: () => {
          Router.replace('/landing')
        },
        bodyClassName: 'act-feedback-modal share-modal  close-at-center-bottom',
        content: <div className="share-content">
          <img
            width={91}
            style={{ position: 'absolute', top: '-34px' }}
            src={`${BASE_PATH}/img/game/share-top-icon.png`}
          />
          <AutoCenter>
            <Space direction="vertical" align="center">
              <h3>亲爱的朋友们</h3>
              <Space direction="vertical" align="center">
                <div style={{ textAlign: 'center' }}>快来跟我一起抽取海量U币<br />与300元文化宣传品吧</div>
              </Space>
            </Space>
          </AutoCenter>
          <AutoCenter>
            <img
              src={resp.data.qrcode}
              width='180'
              height='180'
              style={{ marginTop: '20px' }}
            />
          </AutoCenter>
          <AutoCenter>
            <h3 style={{ textAlign: 'center' }}>截图转发专属二维码</h3>
            <h3 style={{ textAlign: 'center' }}>邀请小伙伴一起赢取海量U币</h3>
          </AutoCenter>
          <img
            width={55}
            style={{ position: 'absolute', right: '12%', bottom: '10px' }}
            src={`${BASE_PATH}/img/game/share-bottom-icon.png`}
          />
        </div>,
        actions: [],
        // closeOnAction: false,
        // closeOnMaskClick: false,
        hideClose: true
      })
    })

  }
  /** 暂无游戏次数  */
  const gameCheck = (state, callback) => {
    const m = callFeedback({
      bodyClassName: 'act-feedback-modal share-modal  close-at-center-bottom',
      content: <div style={{ textAlign: 'center' }}>
        <img
          src={`${BASE_PATH}/img/game/no-num-icon.png`}
          width={94}
        />
        <div style={{ fontWeight: 'bold', fontSize: '16px' }}>
          很遗憾
        </div>
        <p>今日次数已用完<br />{state === 2 ? '邀请不同好友数可获得一次游戏机会' : ''}</p>

      </div>,
      actions: [
        <Button key='confirm' className="act-btn act-btn-bevel" onClick={() => {
          m.close()
          if (callback) callback()
        }}>
          确认
        </Button>,
        state === 2 && <Button key='share' className="act-btn act-btn-bevel" onClick={() => {
          m.close()
          handleShare()
        }}>
          去邀请
        </Button>
      ],
      hideClose: true
    })
  }
  /** 不在活动时间 */
  const activeOver = (resp) => {
    const m = callFeedback({
      hideClose: true,
      closeOnAction: false,
      closeOnMaskClick: false,
      title: <div dangerouslySetInnerHTML={{ __html: resp.msg || '游戏失败' }}></div>,
      actions: <Button className="act-btn act-btn-bevel" onClick={async () => {
        const env = await checkENV2()
        if (env === 'mini') {
          wx?.miniProgram.navigateBack && wx?.miniProgram.navigateBack({})
        } else if (env === 'app') {
          window?.UNIApp?.closePage()
        }
        m.close()
      }}>确 定</Button>
    })
  }
  return {
    handleShowShare,
    gameCheck,
    activeOver,
    handleShare
  }
}